<template>
    <div class="form-item form-label">
        <div class="form-item-label" :style="{width:labelWidth}">
            <span>{{label}}</span>
            <span v-if="require" class="form-item-required">*</span>
        </div>
        <div class="form-item-content">
            <slot></slot>
            <div class="form-item-extend">
                <div class="invalid-tooltip" v-if="message">{{message}}</div>
                <div class="form-item-description" v-if="description">{{description}}</div>
            </div>
            
        </div>
    </div>
</template>

<script>
export default {
    provide() {
        return {
            updateRequired:(name,require)=>{
                 this.require = require;
            },
            updateMessage:(name,message)=>{
                 this.message = message;
            },
            label: this.label,
        }
    },
    inject: {
        labelWidth:{
            default: '120px'
        }
    },
    data(){
        return {
             require: false,
            message: ''
        }
    },
    props: {
        label: {
            type: String,
            default: ''
        },
        
        description:{
            type: String,
            default: ''
        }
    },
}
</script>


<style>
.form-item-required{
    color: #dc3545;
    padding-left: 5px;
}
.form-item-extend{
    position: relative;
}
.form-item-description{
    color: #6c757d;
    padding-top: 5px;
    font-size: 14px;
}
.invalid-tooltip{
    background-color: #dc3545bd;
    display: block;
    top: 0px;
    right: 0px;
}

.form-item-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>